<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@include file="/WEB-INF/mytag.jspf"%>
<!DOCTYPE html>
<html>
<head>
<base href="<%=basePath%>">
<title>我的预约</title>
<script src="assets/js/iscrollEvent.js"></script>
<style>
    html,
    body{
      height: 100%;
    }
</style>
<script type="text/javascript">
	var app = new EventsList(null, {
		api : '${ctx}/weixin/vip/myOrderPage',
		params : {
			page : 1,
			no_record :'您当前还没有预约哦'
		}
	}, initData);
	app.init();

	document.addEventListener('touchmove', function(e) {
		e.preventDefault();
	}, false);

	function initData(data, type, $list) {
		if (data.rows) {
			var temp = $.trim($("#temp").html());
			$.each(data.rows, function(i, item) {
				var date = new Date(item.appointmentTime.replace(/-/g, "/"));
				var strDate = date.format("M月d日 EEE - HH:mm");
				var stateName = "未受理";
				if (item.state == "10X")
					stateName = "已拒绝";
				else if (item.state == "10A")
					stateName = "已接受";
				var div = $(Comm.format(temp, strDate, item.serviceItemNames,
						item.employeeName,stateName));
				if (stateName == "未受理") {
					$btn = div.find('button');
					$btn.prop("disabled", true);
					$btn.addClass("am-btn-default");
					$btn.removeClass("am-btn-landiao");
				}
				if(item.state == "10X"){
					var refuse = "<span class='am-block am-padding-sm'>拒绝理由："+item.refuseReason+"</span><hr class='am-margin-0'>";
					div.find('.state-span').before(refuse);
				}
				div.appendTo($list);
			});
		}
	}
</script>
</head>
<body>
	<div id="wrapper" data-am-widget="list_news"
		class="am-list-news am-list-news-default">
		<div class="am-list-news-bd">
			<div class="pull-action loading" id="pull-down">
				<span class="am-icon-arrow-down pull-label" id="pull-down-label">
					下拉刷新</span> <span class="am-icon-spinner am-icon-spin"></span>
			</div>
			<div class="am-list am-g" id="record-list">
				<div class="am-list-item-text">正在加载内容...</div>
			</div>
			<div class="pull-action" id="pull-up">
				<span class="am-icon-arrow-down pull-label" id="pull-up-label">
					上拉加载更多</span> <span class="am-icon-spinner am-icon-spin"></span>
			</div>
		</div>
	</div>
	<div style="display: none" id="temp">
		<div class="am-u-sm-12 am-padding-vertical-sm">
			<div class="am-panel am-panel-landiao">
				<div class="am-panel-hd am-text-bold">预约时间：{0}</div>
				<div class="am-panel-bd am-padding-0">
					<span class="am-block am-padding-sm">预约项目：{1}</span>
					<hr class="am-margin-0">
					<span class="am-block am-padding-sm">预约美发师：{2}</span>
					<hr class="am-margin-0">
					<span class="am-block am-padding-xs am-text-center state-span"><button class="am-btn am-btn-landiao am-radius am-padding-horizontal-lg" type="button">{3}</button></span>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
